<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>404</title>
</head>
<body>
<style>
    @import url("https://fonts.googleapis.com/css?family=Share+Tech+Mono|Montserrat:700");

    * {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
        box-sizing: border-box;
        color: inherit;
    }

    body {
        background-image: linear-gradient(120deg, #4f0088 0%, #000000 100%);
        height: 100vh;
    }

    h1 {
        font-size: 45vw;
        text-align: center;
        position: fixed;
        width: 100vw;
        z-index: 1;
        color: #ffffff26;
        text-shadow: 0 0 50px rgba(0, 0, 0, 0.07);
        top: 50%;
        transform: translateY(-50%);
        font-family: "Montserrat", monospace;
    }

    div {
        background: rgba(0, 0, 0, 0);
        width: 70vw;
        position: relative;
        top: 50%;
        transform: translateY(-50%);
        margin: 0 auto;
        padding: 30px 30px 10px;
        box-shadow: 0 0 150px -20px rgba(0, 0, 0, 0.5);
        z-index: 3;
    }

    P {
        font-family: "Share Tech Mono", monospace;
        color: #f5f5f5;
        margin: 0 0 20px;
        font-size: 17px;
        line-height: 1.2;
    }

    span {
        color: #f0c674;
    }

    i {
        color: #8abeb7;
    }

    div a {
        text-decoration: none;
    }

    b {
        color: #81a2be;
    }

    a.avatar {
        position: fixed;
        bottom: 15px;
        right: -100px;
        animation: slide 0.5s 4.5s forwards;
        display: block;
        z-index: 4
    }

    a.avatar img {
        border-radius: 100%;
        width: 44px;
        border: 2px solid white;
    }

    @keyframes slide {
        from {
            right: -100px;
            transform: rotate(360deg);
            opacity: 0;
        }
        to {
            right: 15px;
            transform: rotate(0deg);
            opacity: 1;
        }
    }
    .backToHome{
        color: deepskyblue;
    }
</style>
<h1>404</h1>
<div><p>> <span>ERROR CODE</span>: "<i>HTTP 404 Not Found</i>"</p>
    <p>> <span>ERROR DESCRIPTION</span>: "<i>Sorry, the page you requested '/' cannot be found on this server.</i>"</p>
    <p>> <span>ERROR POSSIBLY CAUSED BY</span>: [<b> Misspelled URL,Outdated link or bookmark,Page moved or deleted</b>...]</p>
    <p>> <span>WHAT YOU CAN DO</span>: "<i> Double check the URL you entered,Try searching this site for similar content,Click your browser's back button to return to previous page</i>"</p>
    <p>> <span>HERE ARE SOME USEFUL PAGES ON THIS SITE:</span>: [<a href="/">Home Page</a>, <a href="/">About Us</a>, <a href="/">Contact Us</a>, <a href="/">Blog</a>...]
    </p><p>> <span>HAVE A NICE DAY SIR AXLEROD :-)</span> <a  href="/">Being <span class="backToHome" >5</span>s Back To Home</a></p>
</div>

<a class="avatar" href="https://github.com/OpencvLZG" title="Cilang"><img src="https://avatars.githubusercontent.com/u/94965106?v=4"/></a>
<script>

    var str = document.getElementsByTagName('div')[0].innerHTML.toString();
    var i = 0;
    document.getElementsByTagName('div')[0].innerHTML = "";

    setTimeout(function() {
        var se = setInterval(function() {
            i++;
            document.getElementsByTagName('div')[0].innerHTML = str.slice(0, i) + "|";
            if (i == str.length) {
                clearInterval(se);
                backToHomeLoading();
                document.getElementsByTagName('div')[0].innerHTML = str;

            }
        }, 4);

    },0);
    function backToHomeLoading() {
        setInterval(function () {
            second = document.getElementsByClassName("backToHome")[0].innerHTML;
            second --;
            document.getElementsByClassName("backToHome")[0].innerHTML = second;
            if (second == 0 ){
                location.replace("/static/page/home.html");
            }
        },1000)
    }
</script>
</body>

</html>